<template>
	<view class="container ">
		<view class="tips w94">
			提交的资料用于资质认证
		</view>
		<view class="title w94">
			基本信息
		</view>
		<view class="cell w94">
			<text class="label self-center">企业名称</text>
			<view>
				<u-input v-model="companyData.name" :border="false" inputAlign="right" placeholder="请输入企业名称"></u-input>
			</view>
		</view>
		<view class="cell w94">
			<text class="label">用油类型</text>
			<view class="type flex" @click="companyTypeShow = true">
				<text style="margin-right: 10rpx;" v-if="companyData.companyType === ''">请选择</text>
				<text style="color: #000;" v-else>{{typeValue}}</text>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>
		</view>
	</view>
	<view class="zizhi" v-if="companyData.companyType !== ''">
		<view class="title w94">上传资质</view>
		<view class="w94 item" v-for="item of aptitudeList[companyData.companyType]">
			<view class="label">{{item.label}}</view>
			<view v-if="!item.image">
				<up-upload :fileList="item.image" multiple :maxCount="1" accept="all"
					@afterRead="afterRead($event,item)">
					<view class="custom-upload">
						<u-icon name="plus-circle-fill" color="#FF4110" size="20"></u-icon>
						<text class="text">点击上传图片或PDF文件</text>
					</view>
				</up-upload>
			</view>
			<view v-else class="flex-between intro">
				<view class="flex">
					<u-icon customPrefix="custom-icon" name="zhaopian" size="30"></u-icon>
					<view style="width: 400rpx;margin-left: 20rpx;">
						<u-text text="1231222222.png" lines="1"></u-text>
						<u-text text="2kb" size="12" color="#999"></u-text>
					</view>
				</view>
				<view class="self-center">
					<u-icon name="trash" size="18"></u-icon>
				</view>
			</view>
		</view>

		<view class=" btn">
			<u-button type="primary" shape="circle">提交</u-button>
		</view>
	</view>
	<up-picker :show="companyTypeShow" :closeOnClickOverlay="true" confirmColor="#FF4110" :columns="companyTypeList"
		@close="companyTypeShow = false" @cancel="companyTypeShow = false" @confirm="pickerConfirm"
		keyName="label"></up-picker>
</template>
<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue"
	const aptitudeList = ref([
		[{
				key: 'zhizhao',
				label: '企业营业执照',
				image: {}
			},
			{
				key: 'sfz',
				label: '企业经办人身份证复印件',
				image: {}
			},
			{
				key: 'weixian',
				label: '危险化学品经营许可证',
				image: {}
			}
		],
		[{
				key: 'zhizhao',
				label: '企业营业执照'
			},
			{
				key: 'sfz',
				label: '企业经办人身份证复印件'
			},
			{
				key: 'weixian',
				label: '危险化学品经营许可证'
			},
			{
				key: 'lingshou',
				label: '成品油零售许可证'
			},
		],
		[{
				key: 'zhizhao',
				label: '企业营业执照'
			},
			{
				key: 'sfz',
				label: '企业经办人身份证复印件'
			},
			{
				key: 'chengnuo',
				label: '企业自用油承若书'
			}

		]
	])
	const companyData = ref({
		name: '',
		companyType: ''
	})
	const typeValue = computed(() => {
		return companyTypeList[0].find(item => item.value == companyData.value.companyType).label
	})
	/* 文件上传 */
	const afterRead = async (event, item) => {
		const file = event.file;
		const res = await uni.uploadFile({
			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file'
		})
	}
	/* 选择器 */
	const companyTypeShow = ref(false)
	const companyTypeList = reactive([
		[{
				label: '油品贸易企业',
				value: 0
			},
			{
				label: '油品零售企业',
				value: 1
			},
			{
				label: '自用油企业',
				value: 2
			}
		]
	])

	const pickerConfirm = (data) => {
		console.log(data)
		companyData.value.companyType = data.value[0].value
		console.log(companyData.value)
		companyTypeShow.value = false
	}
</script>

<style lang="scss">
	.container {
		background-color: #fff;

		.tips {
			font-size: 14px;
			padding-top: 30rpx;
			color: $u-primary;
		}

		.cell {
			display: flex;
			justify-content: space-between;
			padding: 25rpx 0px;

			.label {
				font-size: 14px;
			}

			.type {
				font-size: 14px;
				color: #999;
			}
		}
	}

	.zizhi {
		background-color: #fff;
		padding-bottom: 20rpx;
		margin-top: 30rpx;

		.item {


			.label {
				font-size: 14px;
				color: #999;
				padding: 20rpx 0;
			}

			.intro {
				background-color: #FAFAFA;
				padding: 20rpx;
			}

			.custom-upload {
				display: flex;
				border: 1px solid #ceccca;
				padding: 20rpx 100rpx;
				font-size: 14px;
				color: #FF4110;
				border-radius: 8px;

				.text {
					margin-left: 30rpx;
				}
			}
		}

		.btn {
			width: 80%;
			margin: 0 auto;
			margin-top: 100rpx;
			margin-bottom: 50rpx;
		}
	}

	:deep(.u-upload__wrap) {
		justify-content: center !important;
	}

	.title {
		padding-top: 20rpx;
		font-weight: 600;
	}
</style>